<template>
  <div class="box">
    <div class="top">
        <div class="title">
            <span @click="back">&lt;</span>
            <p>管理地址</p>
        </div>
    </div>
    <div class="bottom">
        <div class="one" v-show="list==''">
            <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng405de353c3d4264aa037561c2f5c0ae595d5ee0da8169acc703bd52317ee2d7e"/>
            <p>暂无地址</p>
        </div>
        <div class="two" v-show="list!=''">
            <van-address-list
            v-model="chosenAddressId"
            :list="list"
            default-tag-text="默认地址"
            @edit="onEdit"
            @select="select"
            />
        </div>
        <van-button type="primary" class="add" @click="add">添加一个新地址</van-button>
    </div>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
    data() {
        return {
        chosenAddressId: '1',
        };
    },
    created(){
        this.init()
    },
    computed:{
        ...mapState("address",["list"])
    },
  methods: {
    ...mapActions("address",["init"]),
    onEdit(item, index) {
      this.$toast('编辑地址:' + index);
    },
    add(){
        this.$router.push("/addaddress")
    },
    back(){
        this.$router.back();
    },
    select(item){
        this.$toast.setDefaultOptions({ duration: 1000 });
        this.$toast("修改成功")
        this.chosenAddressId=item.id;
        item.isDefault=true;
        let newList=this.list.filter(items=>items.id!=item.id);
        newList.forEach(function(item){
            item.isDefault=false;
        })
    }
  },
}
</script>

<style lang="scss" scoped>
.box{
    height: 100%;
    width: 100%;
    background: #F7F7F7;
}
.top{
    height: 0.58rem;
    // background-color: aqua;
    box-sizing: border-box;
    padding: 0 0.28rem;
    border-bottom: 2px solid #E6E6E6;
    .title{
        width: 60%;
        height: 0.58rem;
        font-size: 0.18rem;
        line-height: 0.58rem;
        display: flex;
        justify-content: space-between;
        p{
            font-weight: 600;
            color: #333333;
        }
    }
}
.bottom{
    background: #F7F7F7;
    img{
        width: 1.56rem;
        height: 1.68rem;
        margin-top: 1.24rem;
        margin-left: 1.1rem;
    }
    p{
        font-size: 0.16rem;
        color: #333333;
        line-height: 0.22rem;
        margin-left: 1.55rem;
    }
    .add{
        font-size: 0.14rem;
        width: 240px;
        width: 2.4rem;
        height: 0.45rem;
        background: #00D2BB;
        border-radius: 0.23rem;
        margin-top: 0.4rem;
        margin-left: 0.67rem;
    }
}
.van-address-list__bottom{
    display: none;
}


</style>